<template>
    <div class="tech-list">
        <el-row type="flex" justify="end" align="middle" class="upload-position">
            <el-button type="primary" icon="el-icon-upload" size="small" @click="goAdd">补录</el-button>
            <el-button icon="el-icon-sort" size="small" @click="sort">修改排序</el-button>
        </el-row>
        <el-tabs v-model="active" type="card" @tab-click="handleClick" style="width: 70%">
            <el-tab-pane v-for="(item, index) in tagArr" :key="index" :label="item.name" :name="item._id"></el-tab-pane>
        </el-tabs>

        <div class="grey-bg">
            <SlickList lockAxis="y" v-model="totalData" :lockToContainerEdges="true">
                <SlickItem v-for="(item, index) in totalData" :index="index" :key="item.id">
                    <el-row type="flex" align="middle" class="row-sty">
                        <el-row type="flex" align="middle" style="min-width: 350px">
                            <img :src="domain + item.src" alt height="64" />
                            <p>
                                {{ item.name }} <span>{{ item.alis }}</span>
                            </p>
                        </el-row>
                        <el-row type="flex">
                            <el-button size="mini" type="danger" @click="handleEdit(index, item)">修改</el-button>
                        </el-row>
                    </el-row>
                </SlickItem>
            </SlickList>
        </div>
    </div>
</template>
<script>
    import { SlickList, SlickItem } from "vue-slicksort";
    export default {
        props: {
            mid: String,
        },
        components: {
            SlickList,
            SlickItem
        },
        data() {
            return {
                tagArr: [],
                currentTag: "",
                loading: false,
                active: "",
                totalData: [], // 获取总数据
                itemDetailData: {},
                origins: [],
                createSciences: [],
                attrs: [],
            };
        },
        async activated() {
            await this.getTag();
            this.fetchData();
        },
        watch: {
            "$store.state.version": function () {
                this.fetchData();
            },
        },
        methods: {
            async sort() {
                if (!this.currentTag) {
                    return this.$message.warning("请先选择标签！");
                }
                let ids = this.totalData.map((val) => {
                    return val._id;
                });
                let res = await this.axios.post("sort", {
                    module: "modskins",
                    tagId: this.currentTag,
                    ids,
                });
                if (res.data.code == 0) {
                    this.$message.success(res.data.message);
                }
            },
            getTypeToString(tagArr) {
                if (!tagArr) {
                    return;
                }
                let temp = tagArr.map((val) => {
                    return val.name;
                });
                return temp.join(",");
            },
            async getTag() {
                let res = await this.$store.dispatch("getTags", {
                    kind: "skins",
                    mid: this.mid,
                });
                this.tagArr = res.filter((val) => {
                    return val.showType != "2";
                });
                this.tagArr.unshift({
                    _id: "",
                    name: "未添加标签",
                });
                this.active = this.tagArr[0]._id;
            },
            /**
             * 获取列表数据
             **/
            fetchData() {
                this.loading = true;
                this.axios
                    .get("modskin", {
                        params: {
                            tagId: this.currentTag,
                        },
                    })
                    .then((res) => {
                        this.totalData = res.data;
                        this.loading = false;
                    });
            },
            /**
             * 获取详情数据
             **/
            fetchDetail(id) {
                return this.axios.get("material/single", {
                    params: {
                        id,
                    },
                });
            },
            /**
             * 类别切换
             * @param tab
             */
            handleClick(tab) {
                this.currentTag = tab.name;
                this.fetchData();
            },
            /**
             * 查看按钮点击事件
             * @param row
             * @return {Promise<void>}
             */
            handleEdit(index, row) {
                this.$router.push({
                    path: "/mods/skinAddOrEdit",
                    query: {
                        type: "edit",
                        id: row._id,
                        mid: this.mid,
                    },
                });
            },
            goAdd() {
                this.$router.push({
                    path: "/mods/skinAddOrEdit",
                    query: {
                        mid: this.mid,
                    },
                });
            },
        },
    };
</script>

<style lang="scss">
    .demo-table-expand {
        font-size: 0;
    }

    .demo-table-expand label {
        width: 120px;
        color: #99a9bf;
    }

    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }

    .margin-right-12 {
        display: inline-block;
    }

    .grey-bg {
        background-color: #f5f5f5;
    }

    .row-sty {
        display: flex;
        flex-flow: row nowrap;
        justify-content: flex-start;
        align-items: center;
        padding: 12px;
        border-bottom: 1px solid #ededed;
        background-color: #fff;

        img {
            width: 36px;
            height: auto;
        }

        p {
            font-size: 14px;
            color: #333;
            margin-left: 12px;

            span {
                font-size: 12px;
                color: #999;
                margin-left: 8px;
            }
        }
    }
</style>
<style lang="scss" scoped>
    .tech-list {
        position: relative;
        padding: 16px;

        .basic-attribute {
            height: 60px !important;
        }

        .margin-right-12 {
            margin-right: 12px;
        }

        .not-have {
            // display: flex;
        }

        .upload-position {
            position: absolute;
            top: 16px;
            right: 16px;
            z-index: 1;
        }

        .origin-img,
        .material-img {
            width: 32px;
        }
    }
</style>